import QtQuick 1.1
import com.nokia.meego 1.0
import '../Components/'
import '../APIs/'
import '../Views/'
import '../Delegates/'

AbstractPage {
    id: root

    title: 'ATND - '
    loading: view.currentTab.loading

    states: [
        State {
            when: view.currentTab.keyword.length == 0 && editBox.state == 'hidden'
            PropertyChanges {
                target: root
                title: qsTr('ATND - Tap to edit')
            }
        },
        State {
            when: editBox.state == 'hidden'
            PropertyChanges {
                target: root
                title: qsTr('ATND - %1').arg(view.currentTab.keyword)
            }
        }
    ]
    onClicked: {
        textEdit.placeholderText = view.currentTab.placeholderText
        textEdit.text = view.currentTab.keyword
        editBox.state = ''
        textEdit.forceActiveFocus()
    }

    Item {
        id: editBox
//        anchors { left: parent.left; right: parent.right; top: parent.top; topMargin: root.headerHeight }
        x: editArea.x
        y: editArea.y
        width: editArea.width
        height: editArea.height
//        height: childrenRect.height
        visible: opacity > 0
        clip: true

        TextField {
            id: textEdit
            anchors { left: parent.left; right: cancel.left; verticalCenter: parent.verticalCenter }
            platformStyle: TextFieldStyle { textFont.pixelSize: constants.fontSmallSize }
            platformSipAttributes: SipAttributes {
                actionKeyLabel: 'OK'
//                actionKeyEnabled: textEdit.text.length > 0
            }
            Keys.onReturnPressed: {
                view.currentTab.keyword = textEdit.text
                editBox.state = 'hidden'
            }
        }
        ToolButton {
            id: cancel
            width: height
            anchors { right: parent.right; verticalCenter: parent.verticalCenter }
            iconSource: 'image://theme/icon-m-toolbar-cancle'
            onClicked: editBox.state = 'hidden'
        }

        state: 'hidden'
        states: [
            State {
                name: "hidden"
                PropertyChanges {
                    target: editBox
                    opacity: 0
                }
            }
        ]

        transitions: [
            Transition {
                NumberAnimation { properties: 'width' }
            }
        ]
    }


    TabGroup {
        id: view
        anchors.top: parent.top
        anchors.topMargin: root.headerHeight
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom

        currentTab: usersPage

        onCurrentTabChanged: {
            if (menu.status !== DialogStatus.Closed) menu.close()
            editBox.state = 'hidden'
        }
        EventListPage {
            id: usersPage

            saveKey: 'MainPage/UserName'
            property string placeholderText: 'User Name'
            searchQuery: 'nickname=' + keyword.replace(/\s/, ',')
            onSelected: {
                editBox.state = 'hidden'
                root.pageStack.push(eventPage, {'event': event})
            }
        }

        EventListPage {
            id: searchPage1
            saveKey: 'MainPage/Search1'
            property string placeholderText: 'Search Term'
            searchQuery: 'keyword=' + keyword.replace(/\s/, ',')
            onSelected: {
                editBox.state = 'hidden'
                root.pageStack.push(eventPage, {'event': event})
            }
        }

        EventListPage {
            id: searchPage2
            saveKey: 'MainPage/Search2'
            property string placeholderText: 'Search Term'
            searchQuery: 'keyword=' + keyword.replace(/\s/, ',')
            onSelected: {
                editBox.state = 'hidden'
                root.pageStack.push(eventPage, {'event': event})
            }
        }
    }

    Menu {
        id: menu
        visualParent: pageStack
        MenuLayout {
//            MenuItemWithIcon {
//                text: qsTr("Edit")
//                iconSource: 'image://theme/icon-m-toolbar-edit'
//                onClicked: {
//                    textEdit.placeholderText = view.currentTab.placeholderText
//                    textEdit.text = view.currentTab.keyword
//                    editBox.state = ''
//                    textEdit.forceActiveFocus()
//                }
//            }
            MenuItemWithIcon {
                text: qsTr("About")
                iconSource: '/usr/share/icons/hicolor/80x80/apps/qatnd80.png'
                onClicked: pageStack.push(aboutPage)
            }
        }
    }

    toolBarLayout: ToolBarLayout {
        ToolIcon {
            platformIconId: "toolbar-back"
            onClicked: pageStack.pop()
            enabled: false
            opacity: enabled ? 1.0 : 0.5
        }
        ButtonRow {
            TabButton {
                tab: usersPage
                iconSource: 'image://theme/icon-m-toolbar-contact'.concat(theme.inverted ? "-white" : "")
            }
            TabButton {
                tab: searchPage1
                iconSource: 'image://theme/icon-m-toolbar-search'.concat(theme.inverted ? "-white" : "")
            }
            TabButton {
                tab: searchPage2
                iconSource: 'image://theme/icon-m-toolbar-search'.concat(theme.inverted ? "-white" : "")
            }
        }
        ToolIcon {
            platformIconId: "toolbar-view-menu"
            anchors.right: (parent === undefined) ? undefined : parent.right
            onClicked: (menu.status == DialogStatus.Closed) ? menu.open() : menu.close()
        }
    }
}
